<template>
  <el-container class="app-wrapper">
    <el-header height="60px">
      <div class="header-content">
        <div class="header-left">
          <h1 class="app-title">早睡打卡助手-陈犬犬专供版</h1>
        </div>
      </div>
    </el-header>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script setup>

import { useRouter } from 'vue-router'


const router = useRouter()
</script>

<style scoped>
.app-wrapper {
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  background-color: #F8FAFC;
}



.el-menu-mobile {
  border-right: none;
  padding: 12px;
}

.el-menu-mobile .el-menu-item {
  border-radius: 8px;
  margin-bottom: 4px;
}

.el-menu-mobile .el-menu-item:hover {
  background-color: #ECFDF5;
}

.el-main {
  padding: 0;
  background-color: #F8FAFC;
}

@media screen and (max-width: 768px) {
  .header-content {
    padding: 0;
  }

  .header-left {
    padding-left: 16px;
  }

  .app-title {
    font-size: 18px;
  }

  .user-info {
    padding: 4px 12px;
    margin-right: 16px;
  }
}
</style>